<template>
  <div class="audition296">
    <p>key 是用来帮助 react 识别哪些内容被更改、添加或者删除。<br/>key 需要写在用数组渲染出来的元素内部，并且需要赋予其一个稳定的值。<br/>稳定在这里很重要，因为如果 key 值发生了变更，react 则会触发 UI 的重渲染。<br/>这是一个非常有用的特性。</p>
    <p><br></p>
    <p>key 的唯一性</p>
    <p>在相邻的元素间，key 值必须是唯一的，如果出现了相同的 key，同样会抛出一个 Warning，告诉相邻组件间有重复的 key 值。<br/>并且只会渲染第一个重复 key 值中的元素，因为 react 会认为后续拥有相同 key 的都是同一个组件。</p>
    <p><br></p>
    <p>key 值不可读</p>
    <p>虽然我们在组件上定义了 key，但是在其子组件中，我们并没有办法拿到 key 的值，<br/>因为 key 仅仅是给 react 内部使用的。如果我们需要使用到 key 值，<br/>可以通过其他方式传入，比如将 key 值赋给 id 等</p>
  </div>
</template>

<script>
export default {
  name: 'Audition296'
}
</script>

<style>

</style>